<template>
  <div class="recharge-dialog-container">
    <el-dialog v-model="dialogVisible" title="会员充值中心" width="980px" :close-on-click-modal="false" class="recharge-dialog" top="5vh">
      <div class="dialog-header">
        <div class="remaining-words">
          <div class="words-info">
            <i class="el-icon-data-line"></i>
            您当前剩余字数：<span class="word-count">{{ remainingWords }}</span>
          </div>
          <div class="user-level" :class="userLevel.className">
            {{ userLevel.name }}
            <el-tooltip content="查看会员权益" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="action-buttons">
          <div class="record-btn" @click="showRechargeRecords">
            <i class="el-icon-time"></i>
            充值记录
          </div>
          <div class="service-btn" @click="contactCustomerService">
            <i class="el-icon-service"></i>
            联系客服
          </div>
        </div>
      </div>

      <div class="fixed-height-container">
        <el-tabs v-model="activeTab" class="recharge-tabs">
          <el-tab-pane label="会员套餐" name="membership">
            <div class="membership-plans">
              <el-row :gutter="24">
                <el-col :span="6" v-for="plan in membershipPlans" :key="plan.id">
                  <div
                    class="plan-card"
                    :class="{
                      'selected': selectedPlan?.id === plan.id,
                      'best-choice': plan.isBest
                    }"
                  >
                    <div class="deepseek-badge">
                      <span class="deepseek-text">DeepSeek、图文并茂</span>
                    </div>
                    <div v-if="plan.tag" class="plan-tag">{{ plan.tag }}</div>
                    <div v-if="plan.isBest" class="best-choice-tag">最佳选择</div>
                    <div class="plan-header">
                      <h3>{{ plan.name }}</h3>
                      <div class="price">
                        <span class="current-price">¥{{ plan.currentPrice * 0.01 }}</span>
                        <span class="original-price">¥{{ plan.originalPrice * 0.01 }}</span>
                      </div>
                      <div class="price-desc">{{ getMonthlyPrice(plan) }}</div>
                    </div>
                    <div class="plan-features">
                      <ul>
                        <li v-for="feature in plan.features" :key="feature"><i class="el-icon-check"></i>{{ feature }}</li>
                      </ul>
                    </div>
                    <div class="btn-container">
                      <el-button type="primary" class="select-btn" @click="selectPlan(plan)" :class="{ 'selected': selectedPlan?.id === plan.id }">
                        {{ selectedPlan?.id === plan.id ? '已选择' : '选择套餐' }}
                      </el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="字数套餐" name="words">
            <div class="word-plans">
              <el-row :gutter="24">
                <el-col :span="6" v-for="plan in wordPlans" :key="plan.id">
                  <div
                    class="plan-card"
                    :class="{
                      'selected': selectedPlan?.id === plan.id,
                      'most-used': plan.mostUsed
                    }"
                  >
                    <div v-if="plan.mostUsed" class="most-used-tag">热门选择</div>
                    <div class="plan-header">
                      <h3>{{ formatWordCount(plan.words) }}字</h3>
                      <div class="price">
                        <span class="current-price">¥{{ plan.currentPrice * 0.01 }}</span>
                        <span class="original-price">¥{{ plan.originalPrice * 0.01 }}</span>
                      </div>
                      <div class="price-desc">{{ getWordPrice(plan) }}</div>
                    </div>
                    <div class="plan-features">
                      <div class="plan-desc">单次购买字数，用完为止</div>
                      <div class="spacer"></div>
                    </div>
                    <div class="btn-container">
                      <el-button type="primary" class="select-btn" @click="selectPlan(plan)" :class="{ 'selected': selectedPlan?.id === plan.id }">
                        {{ selectedPlan?.id === plan.id ? '已选择' : '选择套餐' }}
                      </el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div v-if="selectedPlan" class="payment-section">
        <div class="payment-title">支付方式</div>
        <div class="payment-methods">
          <div class="payment-option wechat" :class="{ 'selected': paymentMethod === 'wechat' }" @click="selectPaymentMethod('wechat')">
            <span>微信支付</span>
          </div>

          <div class="payment-option alipay" :class="{ 'selected': paymentMethod === 'alipay' }" @click="selectPaymentMethod('alipay')">
            <span>支付宝</span>
          </div>
        </div>

        <div class="payment-summary">
          <div class="order-summary">
            <div class="summary-title">订单信息</div>
            <div class="summary-item">
              <span>套餐名称：</span>
              <span>{{ getPlanName(selectedPlan) }}</span>
            </div>
            <div class="summary-item">
              <span>支付方式：</span>
              <span>{{ paymentMethod === 'wechat' ? '微信支付' : '支付宝' }}</span>
            </div>
            <div class="summary-item">
              <span>支付金额：</span>
              <span class="price-amount">¥{{ selectedPlan.currentPrice * 0.01 }}</span>
            </div>
            <div class="summary-item" v-if="qrCodeExpireTime">
              <span>二维码有效期：</span>
              <span>{{ qrCodeExpireTime }}</span>
            </div>
          </div>

          <div v-if="currentOrder?.url" class="qr-code-section">
            <qrcode-vue :value="currentOrder?.url" :size="200" level="H"></qrcode-vue>
            <div class="qr-code-tip">请使用{{ paymentMethod === 'wechat' ? '微信' : '支付宝' }}扫码支付</div>
          </div>
        </div>
      </div>
      <!-- 新增滚动充值列表 -->
      <div class="recent-recharge-section">
        <div class="section-title">
          <i class="el-icon-data-analysis"></i>
          <span>实时充值动态</span>
        </div>
        <div class="scrolling-container" ref="scrollContainer">
          <div class="scrolling-list" ref="scrollList" :style="{ transform: `translateY(${translateY}px)` }">
            <div v-for="(record, index) in displayRecords" :key="index" class="recharge-record-item">
              <div class="user-info">
                <span class="user-name">{{ record.userName }}</span>
                <span class="time-ago">{{ record.timeAgo }}</span>
              </div>
              <div class="recharge-info">
                <span class="plan-name">{{ record.planName }}</span>
                <span class="amount">¥{{ record.amount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="agreement">
         <el-checkbox v-model="agreementChecked">我已阅读并同意</el-checkbox>
        <el-button type="text" @click="showAgreement" class="agreement-link">《用户充值服务协议》</el-button>
      </div>
    </el-dialog>

    <!-- 用户协议对话框 -->
    <el-dialog v-model="agreementDialogVisible" title="用户充值服务协议" width="600px" append-to-body class="agreement-dialog">
      <div class="agreement-content">
        <h3>用户充值服务协议</h3>
        <p>1. 服务说明</p>
        <p>1.1 阡陌智标提供会员充值与字数充值服务，用户可根据自己的需求选择合适的套餐。</p>
        <p>1.2 会员套餐自购买之日起计算，按照套餐周期提供服务。</p>
        <p>1.3 字数套餐自购买之日起有效，不设使用期限，用完为止。</p>

        <p>2. 充值与支付</p>
        <p>2.1 用户需选择套餐和支付方式后，通过扫描二维码完成支付。</p>
        <p>2.2 支付过程中产生的银行手续费由用户承担。</p>
        <p>2.3 充值成功后，系统会自动更新用户账户权益。</p>

        <p>3. 退款政策</p>
        <p>3.1 虚拟商品一经购买，除系统原因导致无法使用外，不支持退款。</p>
        <p>3.2 如遇特殊情况需要退款，请联系客服处理。</p>

        <p>4. 其他条款</p>
        <p>4.1 本协议解释权归阡陌智标所有。</p>
        <p>4.2 如有争议，请与客服联系协商解决。</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="agreementDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="agreeAndClose">同意并关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 充值记录对话框 -->
    <el-dialog v-model="recordsDialogVisible" title="充值记录" width="700px" append-to-body class="records-dialog">
      <div class="records-content">
        <el-table :data="rechargeRecords" style="width: 100%">
          <el-table-column prop="createTime" label="充值时间" width="180" />
          <el-table-column prop="planName" label="套餐名称" />
          <el-table-column prop="amount" label="金额">
            <template #default="scope"> ¥{{ (scope.row.amount * 0.01).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column prop="paymentMethod" label="支付方式">
            <template #default="scope">
              {{ scope.row.paymentMethod === 1 ? '微信' : '支付宝' }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status === 1">充值中</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 2">充值成功</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status === 3">充值失败</el-tag>
              <el-tag type="info" v-else-if="scope.row.status === 4">用户取消</el-tag>
              <el-tag type="info" v-else>系统关闭</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="recordsDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 客服对话框 -->
    <el-dialog v-model="customerServiceDialogVisible" title="联系客服" width="400px" append-to-body class="customer-dialog" align-center>
      <div class="customer-content">
        <img src="https://qny.sunne.xyz/static/img/kmm/ewm.jpg" class="customer-qr" alt="客服二维码" />
        <p>扫码添加客服微信，获取更多帮助</p>
        <div class="customer-info">
          <p><i class="el-icon-phone"></i> 客服热线：400-123-4567</p>
          <p><i class="el-icon-message"></i> 客服邮箱：service@hsbs.com</p>
          <p><i class="el-icon-time"></i> 服务时间：周一至周五 9:00-18:00</p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="customerServiceDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { getRechargePlans, createRechargeOrder, getOrderStatus, getRechargeRecords, getRecentLog } from '@/api/payment';
import type { MembershipPlan, WordPlan, RechargeOrder, RechargeRecord, RecentLog } from '@/api/payment/types';
import QrcodeVue from 'qrcode.vue'


const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  remainingWords: {
    type: Number,
    default: 0
  },
  planType: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['cancel', 'recharge-success']);

const dialogVisible = ref(false);
const activeTab = ref('membership');
const selectedPlan = ref<MembershipPlan | WordPlan | null>(null);
const paymentMethod = ref<'wechat' | 'alipay' | ''>('');
const agreementChecked = ref(false);
const agreementDialogVisible = ref(false);
const recordsDialogVisible = ref(false);
const customerServiceDialogVisible = ref(false);

// 套餐数据
const membershipPlans = ref<MembershipPlan[]>([]);
const wordPlans = ref<WordPlan[]>([]);
const rechargeRecords = ref<RechargeRecord[]>([]);

// 订单相关
const currentOrder = ref<RechargeOrder | null>(null);
const qrCodeExpireTime = ref('');
let paymentCheckInterval: ReturnType<typeof setInterval> | null = null;

// 新增滚动充值列表相关代码
const translateY = ref(0);
const scrollContainer = ref(null);
const scrollList = ref(null);
let scrollInterval = null;

// 模拟充值记录数据
const recentRechargeRecords = ref<RecentLog[]>([])

// 创建一个扩展的列表，用于实现无缝滚动
const displayRecords = computed(() => {
  return [...recentRechargeRecords.value, ...recentRechargeRecords.value.slice(0, 10)];
});

const startScrolling = () => {
  const itemHeight = 40; // 每个记录项的高度，根据实际CSS调整
  const duration = 20000; // 20秒
  const totalItems = recentRechargeRecords.value.length;
  const scrollSpeed = duration / totalItems; // 每条记录滚动的时间

  let currentIndex = 0;

  scrollInterval = setInterval(() => {
    currentIndex++;
    translateY.value = -currentIndex * itemHeight;

    // 当滚动到原始列表结尾时，重置位置
    if (currentIndex >= totalItems) {
      setTimeout(() => {
        currentIndex = 0;
        translateY.value = 0;
      }, 0);
    }
  }, scrollSpeed);
};

// 鼠标悬停时暂停滚动
const pauseScrolling = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval);
    scrollInterval = null;
  }
};

// 鼠标离开时继续滚动
const resumeScrolling = () => {
  if (!scrollInterval) {
    startScrolling();
  }
};

// 用户等级信息
const userLevel = computed(() => {
  if (props.planType === 'pro_yearly') {
    return { name: '标准年卡会员', className: 'diamond-user' };
  } else if (props.planType == 'basic_yearly') {
    return { name: '基础年卡会员', className: 'gold-user' };
  } else if (props.planType == 'pro_monthly') {
    return { name: '标准月卡会员', className: 'gold-user' };
  } else if (props.planType === 'basic_monthly'){
    return { name: '基础月卡会员', className: 'silver-user' };
  }else {
    return { name: '普通用户', className: 'normal-user' };
  }
});

// 监听对话框可见性
watch(
  () => props.visible,
  (newVal) => {
    console.log(newVal);
    dialogVisible.value = props.visible;
    if (newVal) {
      loadRechargePlans();
      loadRecentLog();
    }
  },
  { deep: true }
);

watch(
  () => dialogVisible.value,
  (newVal) => {
    if (!dialogVisible.value) {
      emit('cancel', false);
    }
    if (!newVal) {
      resetState();
    }
  }
);
// 加载充值套餐
const loadRechargePlans = async () => {
  try {
    const { data } = await getRechargePlans();
    membershipPlans.value = data.membershipPlans;
    wordPlans.value = data.wordPlans;
  } catch (error) {
    ElMessage.error('获取充值套餐失败');
  }
};

const loadRecentLog = async () => {
  try {
    const {data} = await getRecentLog();
    console.log('loadRecentLog', data)
    recentRechargeRecords.value = data;

  } catch (error) {
    ElMessage.error('获取最新充值记录');
  }
}

// 加载充值记录
const loadRechargeRecords = async () => {
  try {
    const { data } = await getRechargeRecords();
    rechargeRecords.value = data;
  } catch (error) {
    ElMessage.error('获取充值记录失败');
  }
};

// 选择套餐
const selectPlan = (plan: MembershipPlan | WordPlan) => {
  selectedPlan.value = plan;
  currentOrder.value = null;
  stopPaymentCheck();
};

// 选择支付方式
const selectPaymentMethod = async (method: 'wechat' | 'alipay') => {
  if (!selectedPlan.value) return;

  paymentMethod.value = method;
  try {
    const { data } = await createRechargeOrder({
      planId: selectedPlan.value.id,
      planType: 'type' in selectedPlan.value ? 'membership' : 'words',
      paymentMethod: method
    });
    currentOrder.value = data;
    startPaymentCheck();
  } catch (error) {
    if(error?.response?.data?.detail){
      ElMessage.error(error?.response?.data?.detail);
    }else{
      ElMessage.error('获取支付二维码失败，请重试');
    }
  }
};

// 格式化字数显示
const formatWordCount = (words: number) => {
  if (words >= 10000) {
    return (words / 10000).toFixed(1) + '万';
  }
  return words;
};

// 获取会员套餐月均价格
const getMonthlyPrice = (plan: MembershipPlan) => {
  if (plan.type.includes('yearly')) {
    // 年套餐，计算月均价
    const months = plan.type.includes('basic') ? 12 + 2 : 12 + 3; // 基础年套餐送2个月，专业年套餐送3个月
    const monthlyPrice = (plan.currentPrice *  0.01 / months).toFixed(2);
    return `月均¥${monthlyPrice}`;
  }
  return '按月扣费';
};

// 获取字数套餐单价
const getWordPrice = (plan: WordPlan) => {
  const pricePerTenThousand = ((plan.currentPrice / plan.words) * 100).toFixed(2);
  return `¥${pricePerTenThousand}/万字`;
};

// 获取套餐名称
const getPlanName = (plan: MembershipPlan | WordPlan) => {
  if ('type' in plan) {
    return plan.name;
  } else {
    return `${formatWordCount(plan.words)}字套餐`;
  }
};

// 显示用户协议
const showAgreement = () => {
  agreementDialogVisible.value = true;
};

// 同意并关闭协议
const agreeAndClose = () => {
  agreementChecked.value = true;
  agreementDialogVisible.value = false;
};

// 显示充值记录
const showRechargeRecords = () => {
  loadRechargeRecords();
  recordsDialogVisible.value = true;
};

// 联系客服
const contactCustomerService = () => {
  customerServiceDialogVisible.value = true;
};

// 开始检查支付状态
const startPaymentCheck = () => {
  if (paymentCheckInterval) {
    clearInterval(paymentCheckInterval);
  }

  paymentCheckInterval = setInterval(async () => {
    if (!currentOrder.value) return;

    try {
      const { data } = await getOrderStatus(currentOrder.value.orderId);
      if (data.status === 2) {
        ElMessage.success('支付成功！');
        stopPaymentCheck();
        emit('recharge-success');
        dialogVisible.value = false;
      }else if (data.status === 3 ){
        ElMessage.error('支付失败！');
        stopPaymentCheck();
      }else if(data.status ===  4){
        ElMessage.warning('用户取消支付！');
        stopPaymentCheck();
      }else if(data.status === 5){
        ElMessage.warning('订单关闭');
        stopPaymentCheck();
      }
    } catch (error) {
      console.error('检查支付状态失败', error);
    }
  }, 3000);
};

// 停止检查支付状态
const stopPaymentCheck = () => {
  if (paymentCheckInterval) {
    clearInterval(paymentCheckInterval);
    paymentCheckInterval = null;
  }
};

// 重置状态
const resetState = () => {
  selectedPlan.value = null;
  paymentMethod.value = '';
  currentOrder.value = null;
  agreementChecked.value = false;
  stopPaymentCheck();
};

onMounted(() => {
  if (props.visible) {
    loadRechargePlans();
    loadRecentLog();
  }

  // 启动滚动
  startScrolling();

  if (scrollContainer.value) {
    scrollContainer.value.addEventListener('mouseenter', pauseScrolling);
    scrollContainer.value.addEventListener('mouseleave', resumeScrolling);
  }
});

onUnmounted(() => {
  stopPaymentCheck();

  // 清理滚动
  if (scrollInterval) {
    clearInterval(scrollInterval);
  }

  if (scrollContainer.value) {
    scrollContainer.value.removeEventListener('mouseenter', pauseScrolling);
    scrollContainer.value.removeEventListener('mouseleave', resumeScrolling);
  }
});
</script>

<style scoped>
.recharge-dialog-container :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.recharge-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  margin: 0;
}

.recharge-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 22px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.recharge-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

.recharge-dialog :deep(.el-dialog__body) {
  padding: 30px;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}

.remaining-words {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.words-info {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.words-info i {
  color: #667eea;
  font-size: 20px;
}

.word-count {
  color: #667eea;
  font-size: 22px;
  font-weight: bold;
  margin-left: 5px;
}

.user-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin-top: 5px;
  width: fit-content;
  color: white;
}

.normal-user {
  background: linear-gradient(135deg, #909399 0%, #a8a8a8 100%);
}

.silver-user {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  color: #606266;
}

.gold-user {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
}

.diamond-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-buttons {
  display: flex;
  gap: 15px;
  position: relative;
  z-index: 1;
}
.record-btn,
.service-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #667eea;
  border: 1px solid #c7d3ff;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s;
  background-color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
  font-weight: 500;
}

.record-btn:hover,
.service-btn:hover {
  background-color: #f0f4ff;
  color: #5a6fd8;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.record-btn i,
.service-btn i {
  font-size: 18px;
}

.service-btn {
  background-color: #f0f4ff;
}
.fixed-height-container {
  min-height: 400px;
}

.recharge-tabs :deep(.el-tabs__nav) {
  margin-bottom: 20px;
}

.recharge-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 20px;
}

.recharge-tabs :deep(.el-tabs__item.is-active) {
  color: #667eea;
}

.recharge-tabs :deep(.el-tabs__active-bar) {
  background-color: #667eea;
}

.plan-card {
  position: relative;
  background-color: white;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 20px;
  height: 350px; /* 固定高度确保一致 */
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

.plan-card.selected {
  border: 2px solid #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.plan-card.best-choice {
  border-color: #667eea;
}

.plan-card.most-used {
  border-color: #667eea;
}

.plan-tag {
  position: absolute;
  top: 15px;
  right: -35px;
  background: #67c23a;
  color: white;
  padding: 5px 30px;
  transform: rotate(45deg);
  font-size: 12px;
  z-index: 1;
}

.best-choice-tag {
  position: absolute;
  top: 15px;
  right: -35px;
  background: #667eea;
  color: white;
  padding: 5px 30px;
  transform: rotate(45deg);
  font-size: 12px;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.most-used-tag {
  position: absolute;
  top: 15px;
  right: -35px;
  background: #667eea;
  color: white;
  padding: 5px 30px;
  transform: rotate(45deg);
  font-size: 12px;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.plan-header {
  text-align: center;
  padding-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #f0f0f0;
}

.plan-header h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #303133;
  font-weight: 600;
}

.price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 5px;
}

.original-price {
  color: #909399;
  font-size: 14px;
  text-decoration: line-through;
}

.current-price {
  color: #667eea;
  font-size: 24px;
  font-weight: bold;
}

.price-desc {
  color: #909399;
  font-size: 12px;
}

.plan-features {
  margin-bottom: 20px;
  flex: 1;
}

.plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features li {
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

.plan-features li i {
  color: #667eea;
}

.plan-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
}

.spacer {
  flex: 1;
}

.btn-container {
  margin-top: auto;
  width: 100%;
}

.select-btn {
  width: 100%;
  border-radius: 20px;
  transition: all 0.3s;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.select-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.select-btn.selected {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.payment-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #c7d3ff;
}

.payment-title {
  font-size: 16px;
  font-weight: 600;
  color: #5a6fd8;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.payment-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #667eea;
  margin-right: 8px;
  border-radius: 2px;
}

.payment-methods {
  display: flex;
  gap: 20px;
  margin: 15px 0;
  justify-content: flex-start;
}

.payment-option {
  width: 160px;
  height: 60px;
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  /* 使用flex布局实现水平排列 */
  display: flex;
  flex-direction: row; /* 水平排列 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */

  /* 亮眼的背景 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 微信支付按钮 */
.payment-option.wechat {
  background: linear-gradient(135deg, #22be64, #07c160);
}

/* 支付宝按钮 */
.payment-option.alipay {
  background: linear-gradient(135deg, #40a9ff, #1677ff);
}

/* 图标样式 */
.payment-icon {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  margin-right: 10px; /* 图标和文字之间的间距 */
}

/* 文字样式 */
.payment-option span {
  font-size: 15px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 1; /* 确保文字本身没有额外的行高 */
}

/* 选中状态 */
.payment-option.selected {
  transform: translateY(-3px);
  border: 2px solid white;
}

/* 选中标记 */
.payment-option.selected::after {
  content: '✓';
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #e6b422;
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-summary {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.order-summary {
  padding-right: 15px;
  border-right: 1px dashed #f0f0f0;
}

.summary-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-item span:first-child {
  color: #909399;
}

.price-amount {
  color: #667eea;
  font-weight: 600;
  font-size: 16px;
}

.qr-code-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-code {
  width: 120px;
  height: 120px;
  padding: 5px;
  border: 1px solid #c7d3ff;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
}

.qr-code-tip {
  font-size: 12px;
  color: #909399;
  text-align: center;
  margin-bottom: 5px;
}

.qr-code-expire {
  font-size: 12px;
  color: #e6b422;
  display: flex;
  align-items: center;
  gap: 4px;
}

.agreement {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
}

.agreement-link {
  color: #667eea;
}

.customer-service {
  margin-top: 20px;
  text-align: right;
}

.customer-btn {
  color: #e6b422;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.customer-btn:hover {
  color: #d4a017;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.pay-btn {
  min-width: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
}

.pay-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.agreement-dialog :deep(.el-dialog__body) {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.agreement-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.agreement-dialog :deep(.el-dialog__title) {
  color: white;
}

.agreement-content h3 {
  text-align: center;
  margin-bottom: 20px;
}

.agreement-content p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.records-dialog :deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

.records-dialog :deep(.el-table th) {
  background-color: #fff8e5;
  color: #606266;
}

.records-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.records-dialog :deep(.el-dialog__title) {
  color: white;
}

.customer-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.customer-dialog :deep(.el-dialog__title) {
  color: white;
}

.customer-content {
  text-align: center;
  padding: 20px;
}

.customer-qr {
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
  border: 1px solid #c7d3ff;
  padding: 5px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.customer-info {
  text-align: left;
  margin-top: 20px;
  border-top: 1px solid #c7d3ff;
  padding-top: 20px;
  background-color: #f0f4ff;
  padding: 15px;
  border-radius: 8px;
}

.customer-info p {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-info i {
  color: #667eea;
}

/* 添加响应式设计 */
@media screen and (max-width: 768px) {
  .payment-summary {
    flex-direction: column;
  }

  .recharge-dialog-container :deep(.el-dialog) {
    width: 95% !important;
  }

  .el-col {
    width: 100% !important;
  }
}

.deepseek-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(106, 17, 203, 0.3);
  z-index: 5;
}

/* 新增滚动充值列表样式 */
.recent-recharge-section {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  overflow: hidden;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
}

.section-title i {
  font-size: 18px;
}

.scrolling-container {
  height: 200px; /* 显示5条记录 */
  overflow: hidden;
  position: relative;
}

.scrolling-list {
  transition: transform 0.5s linear;
}

.recharge-record-item {
  padding: 10px 15px;
  border-bottom: 1px dashed rgba(102, 126, 234, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px; /* 固定高度 */
  box-sizing: border-box;
}

.recharge-record-item:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 14px;
  color: #303133;
}

.time-ago {
  font-size: 12px;
  color: #909399;
}

.recharge-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-name {
  font-size: 14px;
  color: #606266;
}

.amount {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
}
</style>
